<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">

<head th:include="shared/css_js::header">
	<title>门 店</title>
	<link rel="stylesheet" type="text/css" href="/static/css/font-awesome.min.css"/>
	<link rel="stylesheet" type="text/css" href="/static/css/weuicss/weui.min.css"/>
	<link rel="stylesheet" type="text/css" href="/static/css/muicss/mui.css"/>
</head>
<style>
	body{
		font-family: SimHei,"微软雅黑",sans-serif;
	}
	.star-vote{
		width:120px;
		height:20px;
		position:relative;
		overflow:hidden;
	}
	.star-vote>span{
		position:absolute;
		width:100px;
		height:20px;
		background-repeat:no-repeat;
		left:0;
		top:0;
	}
	.star-vote>.add-star{
		background-image:url("/img/star.png");
	}
	.star-vote>.del-star{
		background-image:url("/img/greystar.png");
		background-color:white;
	}
	.mui-slider-group{
		margin-top: 0px;
	}
</style>
<body>
	<header class="mui-bar mui-bar-nav">
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		<h1 class="mui-title">门店详情</h1>
	</header>
	<div class="mui-content">
		<div id="slider" class="mui-slider" >
			<div class="mui-slider-group mui-slider-loop" style="max-height: 220px">
				<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
				<div th:each="pic,picStat:${pic}" th:if="${picStat.last}" class="mui-slider-item mui-slider-item-duplicate">
					<a href="javascript:void(0)">
						<img style="height: 225px" th:src="@{'/common/image?filename='+${pic.picurl}}" />
					</a>
				</div>
				<div th:each="pic,picStat:${pic}" class="mui-slider-item">
					<a href="javascript:void(0)">
						<img style="height: 225px" th:src="@{'/common/image?filename='+${pic.picurl}}" />
					</a>
				</div>
				<div th:each="pic,picStat:${pic}" th:if="${picStat.first}" class="mui-slider-item mui-slider-item-duplicate">
					<a href="javascript:void(0)">
						<img style="height: 225px" th:src="@{'/common/image?filename='+${pic.picurl}}" />
					</a>
				</div>
			</div>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell" style="padding-bottom: 0">
					<div class="weui-flex">
						<div class="weui-flex__item" style="flex-grow: 5">
							<p style="color: black">营业时间: <span th:text="${shop.beginworktime}"></span>-<span th:text="${shop.endworktime}"></span></p>
						</div>
						<div class="weui-flex__item" style="flex-grow: 1">
							<p class="fa fa-location-arrow " th:onclick="'javascript:shopwxmap(\''+${shop.lat}+'\',\''+${shop.lon}+'\')'" style="float: right;color: black;font-size: 22px;padding-left: 5px"></p>
							<p style="float: right;color: black"> 导航 </p></p>
						</div>
					</div>
				</li>
			</ul>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<input type="hidden" id="chnid" th:value="${shop.chnid}"/>
					<div class="weui-flex">
						<div class="weui-flex__item" >
							<p class="name" th:text="${shop.chnname}"></p>
						</div>
						<!--<div class="weui-flex__item" >-->
						<!--<p class="mui-pull-right">导航</p>-->
						<!--</div>-->
					</div>
					<p class='order'>
						总订单 <span th:text="${shop.num}"></span> | 总评价 <span class="com" th:text="${shop.com==null?'暂无':#numbers.formatDecimal(shop.com, 0, 2)}"></span>
						<span class="mui-pull-right shoptel" style="color:#929292;" th:text="${shop.tel}"></span>
					</p>
					<div class="weui-flex">
						<div class="weui-flex__item" style="flex-grow: 3">
							<span class="weizhi shopaddr" th:text="${shop.addr}"></span>
						</div>
						<div class="weui-flex__item" style="flex-grow: 1;position: relative">
							<p><span th:if="${shop.distance!=null}" th:text="${shop.distance/10+'KM'}" class="mui-pull-right" style="color:#929292;margin-top: 3px;"></span></p>
						</div>
					</div>
				</li>
			</ul>
		</div>

		<div class="weui-cells__title"></div>
		<div class="weui-cells">
			<a class="weui-cell weui-cell_access open-popup" href="javascript:void(0)" data-target="#allitem">
				<div class="weui-cell__bd">
					服务项目(共<span id="itemnum" th:text="${itemnum.itemnum}"></span>个项目)
				</div>
			</a>
		</div>


		<div class="weui-cells__title"></div>
		<ul class="mui-table-view mui-table-view-chevron ">
			<li class="mui-table-view-cell mui-collapse" id="servlist">
				<a href="javascript:void(0)" class="weui-cell weui-cell_access"  style="padding: 10px 15px">
					<div class="weui-cell__bd">
						服务顾问(共<span id="servnum" th:text="${servnum.servnum}"></span>人)
					</div>
				</a>
				<ul class="mui-table-view mui-table-view-chevron">
					<li th:each="servlist:${servlist}" class="mui-table-view-cell mui-media" style="padding: 10px 15px">
						<div class="weui-flex">
							<div class="weui-flex__item" style="flex-grow: 7">
								<img class="mui-media-object mui-pull-left" src="img/mendian/1.jpg"/>
								<div class="mui-media-body">
									<p class="gname" style="color: black" th:text="${servlist.staffname}">
									</p>
									<p style="color: black">评价
										<span class='com' th:text="${servlist.com==null?'暂无':#numbers.formatDecimal(servlist.com, 0, 2)}"></span> | <span th:text="${servlist.num}"></span>单
										<a th:href="@{/shopdetailserv(chnid=${shop.chnid},servid=${servlist.staffid})}" class="mui-pull-right open-popup detail" style="color: #CE3C39" >详情</a>
									</p>
								</div>
							</div>
						</div>
					</li>
				</ul>
			</li>
		</ul>

		<div class="weui-cells__title"></div>
		<ul class="mui-table-view">
			<li class="mui-table-view-divider">用户评价</li>
			<li th:each="com:${com}" class="mui-table-view-cell mui-media">
				<div>
					<img class="mui-media-object mui-pull-left" src="img/mendian/1.jpg" style="max-width:30px;height: 30px "/>
					<div class="mui-media-body">
						<p class="mui-pull-right" th:text="${#dates.format(com.createtime,'yyyy-MM-dd')}"></p>
						<p th:text="${#strings.substring(com.custname,0,1)+'先生'}"></p>
						<!--<p style="color: red" th:text="'评分:'+${com.commstar}"></p>-->
						<p class="star_con star-vote">
							<span class="add-star" style="background-size: 75px"></span>
							<span class="del-star" style="background-size: 75px"></span>
							<span class="point" style="color: red;left:80px" th:text="${com.commstar}+'.00'"></span>
						</p>
						<p style="color: black;font-size: 16px" th:text="${com.commcontent}"></p>
						<p>
							<span class="mui-pull-right" style="font-size: 12px" th:text="${com.servitemname}"></span> <span style="font-size: 12px;color: black" th:text="${com.carfactname}+' '+${com.carlinename}"></span>
						</p>
					</div>
				</div>
			</li>
			<li class="mui-table-view-cell mui-media">
				<!--<p class="open-popup" style="text-align: center;color: black" data-target="#allcomment">查看全部评论</p>-->
				<a style="text-align: center;color: black" th:href="@{/shopcom(chnid=${shop.chnid})}">查看全部评论</a>
			</li>
		</ul>
	</div>

	<!--查看项目-->
	<div id="allitem" class="weui-popup__container">
		<div class="weui-popup__overlay"></div>
		<div class="weui-popup__modal">

			<header class="mui-bar mui-bar-nav">
				<a class="mui-icon mui-icon-left-nav mui-pull-left close-popup"></a>
				<h1 class="mui-title">服务项目</h1>
			</header>
			<div class="mui-content">
				<div th:each="list3:${list3}">
					<div class="weui-cells__title" th:text="${list3.dictname}"></div>
					<ul th:each="list2:${list2}" th:if="${list2.belongcode==list3.belongcode}" class="mui-table-view mui-table-view-chevron total">
						<li th:each="list1:${list1}" th:if="${list2.packid==list1.packid}" class="mui-table-view-cell mui-collapse">
							<a class="suc" href="#" th:data="${list1.packid}">
								<div class="weui-flex">
									<div class="weui-flex__item" >
										<label th:text="${list1.packname}"></label>
										<p th:text="${list1.remark}"></p>
									</div>
								</div>
							</a>
							<ul class="mui-table-view mui-table-view-chevron">
								<li th:each="list:${list}" th:if="${list.packid==list1.packid}" class="mui-table-view-cell shoptotal" style="padding-right: 0">
									<!--<img th:src="@{/img/by/jiyou.png}" />-->
									<div class="shop" th:data="${list.servitemid}">
										<div class="weui-flex">
											<div class="weui-flex__item" style="flex-grow: 3">
												<p class="itemname" th:text="${list.servitemname}"></p>
												<!--<p>全合成</p>-->
												<p>¥<span class="price" th:text="${list.whprice}"></span></p>
											</div>
											<div class="weui-flex__item" style="flex-grow: 1;position: relative">
												<span class="fa fa-trash" style="margin-right: 10px;float: right"></span>
												<div class="weui-count" style="float: right;bottom: 0px;right: 10px;position: absolute">
													<a class="weui-count__btn weui-count__decrease"></a>
													<span>x</span><span class="num">1</span>
													<a class="weui-count__btn weui-count__increase"></a>
												</div>
											</div>
										</div>
									</div>
								</li>
							</ul>
						</li>
					</ul>
				</div>
			</div>

		</div>
	</div>
	<div id="wxmap" class="weui-popup__container">
		<div class="weui-popup__overlay"></div>
		<div class="weui-popup__modal">

			<header class="mui-bar mui-bar-nav">
				<a class="mui-icon mui-icon-left-nav mui-pull-left close-popup"></a>
				<h1 class="mui-title">门店位置</h1>
			</header>
			<div class="mui-content">

			</div>
		</div>
	</div>

	<input id="accesstoken" type="hidden" th:value="${accesstoken}"/>
	<input id="appId" type="hidden" th:value="${appId}"/>
	<input id="timestamp" type="hidden" th:value="${timestamp}"/>
	<input id="nonceStr" type="hidden" th:value="${nonceStr}"/>
	<input id="signature" type="hidden" th:value="${signature}"/>

	<input id="shopid" type="hidden" th:value="${shop.chnid}"/>
	<input id="shoplat" type="hidden" th:value="${shop.lat}"/>
	<input id="shoplon" type="hidden" th:value="${shop.lon}"/>


<!--<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.3&key=e001d49f941c6992e70edd5322efbcb6&plugin=AMap.Driving"></script>-->

<script th:inline="javascript">
        /*<![CDATA[*/

    $(document).ready(function () {
        $(".star_con").each(function () {
            var points= $(this).find(".point").text();
            var con_wid=$(this).outerWidth();
            var del_move=(points*con_wid)/8;

            var bp=-del_move+"px 0px";
            var sl=del_move+"px";
            $(this).find(".del-star").css("background-position",bp);
            $(this).find(".del-star").css("left",sl);
        });
    });
        /*获取基础access_token接口*/
        wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: $("#appId").val(), // 必填，公众号的唯一标识
            timestamp:$("#timestamp").val() , // 必填，生成签名的时间戳
            nonceStr: $("#nonceStr").val(), // 必填，生成签名的随机串
            signature: $("#signature").val(),// 必填，签名，见附录1
            jsApiList: ["openLocation", "getLocation", "chooseLocation"] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
        });
        function shopwxmap() {
            $.openPopup('#wxmap');
            var lat=$("#shoplat").val();
            var lon=$("#shoplon").val();
            var name=$(".name").text();
            var shopaddr=$(".shopaddr").text();
            wx.openLocation({
                latitude: lat,
                longitude: lon,
                scale: 26,
                name:name,
                address:shopaddr
            })
        }
        mui('#servlist').on('tap','a',function(){
            window.location.href = this.href;
        });


	/*]]>*/
</script>
<link rel="stylesheet" type="text/css" th:href="@{/css/muicss/mendian-detail.css}" />

</body>

</html>